<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem to="/Scheduling">排版</BreadcrumbItem>
      <BreadcrumbItem to="/rypb">人员排版</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">人员排班</h2>
  </div>

  <div class="info">
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons>
        <div class="a">
          <div class="q">
            <Space size="large" wrap>
              <DatePicker
                type="daterange"
                placement="bottom-end"
                placeholder="请选择排班时间"
                style="width: 320px;padding-right:10px"
              />
            </Space>
            <vxe-input
              v-model="searchName"
              placeholder="请输入人员名称"
              style="width: 280px;"
            ></vxe-input>
            <vxe-button status="primary">搜索</vxe-button>
          </div>
          <div class="z">
            
            <vxe-button style="
            width: 88px;
            background-color: #945635;
            color: aliceblue;
            border: none;
          ">排班管理</vxe-button>
            <vxe-button style="
            width: 88px;
            background-color: #f48c72;
            color: aliceblue;
            border: none;
          ">批量删除</vxe-button>
          </div>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const xGrid = ref();
const findList = () => {};
const meanNum = (list, field) => {
  let count = 0;
  list.forEach((item) => {
    count += Number(item[field]);
  });
  return count / list.length;
};
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  showFooter: true,

  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true,
  },
  toolbarConfig: {
    
    refresh: true,
    zoom: true,
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: "toolbar_buttons",
    },
  },
  proxyConfig: {
    props: {
      result: "result",
      total: "page.total", // 配置响应结果总页数字段
    },
    ajax: {
      query: () => findList(),
    },
  },
  columns: [
    { type: "checkbox", width: 70 },
    { field: "id", title: "序号" , width: 70,align: "center"},
    { field: "searchName", title: "日期" , width: 300,align: "center"},
    { field: "dizhi", title: "人员", width: 150 ,align: "center"},
    { field: "mianji", title: "时段" , width: 120,align: "center"},
    { field: "fuzeren", title: "上班状态" , width: 100,align: "center"},
    { field: "guanliren", title: "上班时间" , width: 120,align: "center"},
    { field: "beizhu", title: "下班状态", width: 100,align: "center"},
    { field: "caozuo", title: "下班时间" , width: 120,align: "center"},
    { field: "caozuo", title: "排版状态" , width: 100,align: "center"},
    { field: "caozuo", title: "操作" , width: 120,align: "center"},
  ],
});
</script>
<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}

.q{
  padding-bottom: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
h2 {
  font-weight: normal;
  font-size: 20px;
}
</style>